<template>
  <div class="common-tab" :style="{ '--tabWidth': tabWidth + 'px' }">
    <div class="common-charging-tab" :id="tabRef" :ref="tabRef">
      <div class="box" v-for="(item, key) in tabList" :key="key">
        <van-button
          @click="setActive(key)"
          :class="['tab-button', activeTab === key ? 'active' : '']"
        
          tabindex="-1"
          ref="tabButton"
          >{{ item.title }}
        </van-button>
      </div>
    </div>
    <div
      v-show="showSift"
      @click="clickShow"
      class="sift"
      :class="getShift ? 'click-sift-color' : 'sift-color'"
    >
      <div
         class="icon-box"
        :class="getShift ? 'click-sift-icon' : 'sift-icon'"
      ></div>
      <!-- <span>筛选</span> -->
    </div>
  </div>
</template>

<script>
const generateId = function () {
  return Math.floor(Math.random() * 10000);
};
export default {
  name: "ComTab",
  props: {
    // tab按钮列表
    tabList: {
      type: Array,
      default: (_) => [],
    },
    // tab按钮的宽度
    tabWidth:{
      type:[Number, String],
      default: (_) => 200,
    },
    // 当前选中的button
    activeTab: {
      type: [Number, String],
      default: 0,
    },
    // 是否开启循环，即到达最后一个或第一个是否继续循环切换
    loop: {
      type: Boolean,
      default: (_) => true,
    },
    // 是否开启左右按键切换
    keyboard: {
      type: Boolean,
      default: (_) => true,
    },
    // 是否展示筛选按钮
    showSift: {
      type: Boolean,
      default: (_) => false,
    },
    // 筛选按钮颜色
    getShift: {
      type: Boolean,
      default: (_) => false,
    }
  },
  data() {
    return {
      tabRef: `tab-${generateId()}`,
    };
  },
  created() {},
  mounted() {
    if (this.keyboard) document.addEventListener("click", this.setButtonFocus);
  },
  methods: {
    setButtonFocus(event) {
      const { $refs, tabRef, activeTab } = this;
      const idx = typeof event === "number" ? event : activeTab;
      $refs[tabRef].children[idx].focus();
    },
    setActive(idx) {
      if (this.keyboard) this.setButtonFocus(idx);
      this.$emit("set-active", idx);
    },
    clickShow() {
      console.log('点击');
      this.$emit("click-show",true);
    },
  },
  beforeDestroy() {
    if (this.keyboard)
      document.removeEventListener("click", this.setButtonFocus);
  },
};
</script>

<style lang="less" scoped>
.common-tab {
  background:#f8f8f8;
  padding: 15px 0;
  .common-charging-tab {
    display: flex;
    overflow: hidden;
    width:var(--tabWidth);
    margin: 0 auto;
    box-shadow: 0 5px 10px 0 #ddd;
     border-radius: 15px;
    .box {
      background: #fff;
      height: 30px;
      width: 100%;
      &:nth-child(1) {
        border-radius: 15px 0 0 15px;
      }
      &:nth-last-child(1) {
        border-radius: 0 15px 15px 0;
      }
      .tab-button {
        border: none;
        height: 30px;
        border-radius: 15px;
        background: #fff;
        color: #118a84;
          width: 100%;

        &.active {
          background: #118a84;
          width: 100%;
          color: #fff;
          border-radius: 15px;
        }
      }
    }
  }
  .sift {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    margin-top: -23px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    .icon-box {
      -webkit-mask-image: url("../../assets/icons/sxb.png");
      mask-image: url("../../assets/icons/sxb.png");
      width: 12px;
      height: 12px;
      margin-right: 4.5px;
      margin-top: 2px;
      mask-size: contain;
      mask-position: center;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
    }
    .click-sift-icon {
      background: #118a84;
    }
    .sift-icon {
      background: #333333;
    }
  }
  .click-sift-color {
    color: #118a84;
  }
  .sift-color {
    color: #333333;
  }
}
</style>
